<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Nibbles</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Mono, Visual Basic, Winforms, games, tutorial, 
Nibbles, programming, GUI, multiplatform">
<meta name="description" content="Nibbles">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Nibbles</h1>


<p>
In this part of the Mono Winforms programming tutorial, we will 
create a Nibbles game clone. 
</p>

<h2>Nibbles game</h2>

<p>
<b>Nibbles</b> is an older classic video game. It was first 
created in late 70s. Later it was brought to PCs. 
In this game the player controls a worm. The objective is to 
eat as many apples as possible. 
Each time the worm eats an apple, its body grows. It must 
avoid the walls and its own body. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<h2>Development</h2>

<p>
The size of each of the joints of a worm is 10px. The worm 
is controlled with the cursor keys. 
Initially the worm has three joints. The game is started 
by pressing one of the cursor keys. 
If the game is finished, we display Game Over message in 
the middle of the Board. 
</p>

<div class="codehead">board.vb</div>
<pre class="code">
Imports System
Imports System.Collections
Imports System.ComponentModel
Imports System.Drawing
Imports System.Data
Imports System.Windows.Forms

NameSpace BoardSpace

public class Board 
    Inherits UserControl 


    Const WIDTH As Integer = 300
    Const HEIGHT As Integer = 300
    Const DOT_SIZE As Integer = 10
    Const ALL_DOTS As Integer = 900
    Const RAND_POS As Integer = 27
    Const DELAY As Integer = 140

    Dim x(ALL_DOTS) As Integer 
    Dim y(ALL_DOTS) As Integer 

    Dim dots As Integer
    Dim apple_x As Integer
    Dim apple_y As Integer

    Dim left As Boolean = False
    Dim right As Boolean = True

    Dim up As Boolean = False
    Dim down As Boolean = False
    Dim inGame As Boolean = True

    Private Dim timer As Timer

    Private Dim dot As Bitmap
    Private Dim apple As Bitmap
    Private Dim head As Bitmap

    Private Dim components As IContainer
    
    Public Dim BORDER_WIDTH As Integer
    Public Dim TITLEBAR_HEIGHT As Integer


    Public Sub New
        
        components = New Container
        Me.BackColor = Color.Black
        Me.DoubleBuffered = True
        Me.ClientSize = New Size(WIDTH, HEIGHT)

        Try 
            dot = New Bitmap("dot.png")
            apple = New Bitmap("apple.png")
            head = New Bitmap("head.png")

        Catch e As Exception
            Console.WriteLine(e.Message)
            Environment.Exit(1)
        End Try
       
        Me.InitGame
      
    End Sub


    Private Sub InitGame

        dots = 3
      
        For z As Integer = 0 To dots-1 
            x(z) = 50 - z*10
            y(z) = 50
        Next

        Me.LocateApple

        AddHandler Me.KeyUp, AddressOf Me.OnKeyUp

        timer = New Timer(Me.components)
        timer.Enabled = True
        timer.Interval = DELAY

        AddHandler timer.Tick, AddressOf Me.OnTick
        AddHandler Me.Paint, AddressOf Me.OnPaint
        
    End Sub


    Private Sub OnPaint(ByVal sender As Object, _
               ByVal e As PaintEventArgs) 

        Dim g As Graphics = e.Graphics

        If inGame
            Me.DrawObjects(g)
        Else 
            Me.GameOver(g)
        End If
        
    End Sub

    Private Sub DrawObjects(ByVal g As Graphics) 
        g.DrawImage(apple, apple_x, apple_y)

        For z As Integer = 0 To dots-1
            If z = 0 
                g.DrawImage(head, x(z), y(z))
            Else 
                g.DrawImage(dot, x(z), y(z))
            End If
        Next
    End Sub

    Private Sub GameOver(ByVal g As Graphics) 
    
        Dim msg As String = "Game Over"
        Dim rectF As RectangleF = RectangleF.op_Implicit(Me.ClientRectangle)
        
        Dim format As New StringFormat
        format.Alignment = StringAlignment.Center
        format.LineAlignment = StringAlignment.Center
        
        g.DrawString(msg, Font, Brushes.White, rectF , format)
        timer.Stop
        
    End Sub


    Private Sub CheckApple

        If x(0) = apple_x And y(0) = apple_y
        
            dots += 1
            Me.LocateApple
            
        End If
        
    End Sub
 
    Private Sub Move

        For z As Integer = dots To 1 Step -1
            x(z) = x(z - 1)
            y(z) = y(z - 1)
        Next

        If left
            x(0) -= DOT_SIZE
        End If

        If right
            x(0) += DOT_SIZE
        End If
            
        If up 
            y(0) -= DOT_SIZE
        End If

        If down 
            y(0) += DOT_SIZE
        End If
            
    End Sub


    Private Sub CheckCollision

        For z As Integer = dots To 1 Step -1
            If z > 4 And x(0) = x(z) And y(0) = y(z) 
                inGame = False
            End If
        Next   
    
        If y(0) >= HEIGHT - DOT_SIZE - TITLEBAR_HEIGHT
            inGame = False
        End If
    
        If y(0) < 0 
            inGame = False
        End If
    
        If x(0) >=  WIDTH - DOT_SIZE - BORDER_WIDTH:
            inGame = False
        End If

        If x(0) < 0 
            inGame = False
        End If
            
    End Sub
    
    
    Private Sub LocateApple
    
        Dim rand As New Random

        Dim r As Integer = rand.Next(RAND_POS)
        
        apple_x = r * DOT_SIZE
        r = rand.Next(RAND_POS)
        apple_y = r * DOT_SIZE
       
        
    End Sub



    Private Sub OnTick(ByVal sender As Object, ByVal e As EventArgs)

        If inGame
            Me.CheckApple
            Me.CheckCollision
            Me.Move
        End If
        
        Me.Refresh
    
    End Sub

    
    Private Sub OnKeyUp(ByVal sender As Object, ByVal e As KeyEventArgs)

        Dim key As Integer = e.KeyCode
        
        If key = Keys.Left And Not right
            left = True
            up = False
            down = False
        End If

        If key = Keys.Right And Not left
            right = True
            up = False
            down = False
        End If

        If key = Keys.Up And Not down
            up = True
            right = False
            left = False
        End if

        If key = Keys.Down And Not up 
            down = True
            right = False
            left = False
        End If
        
    End Sub
    
End Class

End Namespace
</pre>


<p>
First we will define the constants used in our game. 
</p>


<p>
The <b class="keyword">WIDTH</b> and <b class="keyword">HEIGHT</b> constants determine 
the size of the Board. The <b class="keyword">DOT_SIZE</b> is the size of the apple and the dot
of the worm. The <b class="keyword">ALL_DOTS</b> constant defines the maximum number of
 possible dots on the Board. (900 = 300*300/10*10)
The <b class="keyword">RAND_POS</b> constant is used to 
calculate a random position of an apple. The <b class="keyword">DELAY</b> 
constant determines the speed of the game.
</p>

<pre class="explanation">
 Dim x(ALL_DOTS) As Integer 
 Dim y(ALL_DOTS) As Integer 
</pre>

<p>
These two arrays store x, y coordinates of all joints of a worm. 
</p>


<p>
In the <b class="keyword">Move</b> method we have the key algorithm 
of the game. To understand it, look at how the worm
is moving. You control the head of the worm. You can change its 
direction with the cursor keys. The rest of the joints move
one position up the chain. The second joint moves where the first 
was, the third joint where the second was etc. 
</p>

<pre class="explanation">
 For z As Integer = dots To 1 Step -1
     x(z) = x(z - 1)
     y(z) = y(z - 1)
 Next
</pre>

<p>
This code moves the joints up the chain.
</p>

<pre class="explanation">
 If left
     x(0) -= DOT_SIZE
 End If
</pre>

<p>
Move the head to the left.
</p>

<p>
In the <b class="keyword">CheckCollision</b> method, we determine if 
the worm has hit itself or one of the walls. 
</p>

<pre class="explanation">
 For z As Integer = dots To 1 Step -1
     If z > 4 And x(0) = x(z) And y(0) = y(z) 
         inGame = False
     End If
 Next
</pre>

<p>
Finish the game, if the worm hits one of its joints with the head. 
</p>

<pre class="explanation">
 If y(0) >= HEIGHT - DOT_SIZE - TITLEBAR_HEIGHT
     inGame = False
 End If
</pre>

<p>
Finish the game, if the worm hits the bottom of the Board. 
</p>

<p>
The followintg image helps understand the collision of the worm object 
with the bottom of the board.
</p>

<br>
<img src="/img/gui/vbwinf/board.png" alt="Collision">
<div class="figure">Figure: Collision</div>

<p>
The <b class="keyword">locateApple</b> method locates an apple randomly 
on the form.
</p>

<pre class="explanation">
 Dim rand As New Random

 Dim r As Integer = rand.Next(RAND_POS)
</pre>

<p>
We get a random number from 0 to RAND_POS - 1.
</p>

<pre class="explanation">
 apple_x = r * DOT_SIZE
 ...
 apple_y = r * DOT_SIZE
</pre>

<p>
These line set the x, y coordinates of the apple
object. 
</p>

<p>
In the <b class="keyword">OnKeyUp</b> method, we 
deternime which keys the player hit.

</p>

<pre class="explanation">
 If key = Keys.Left And Not right
     left = True
     up = False
     down = False
 End If
</pre>

<p>
If we hit the left cursor key, we set <b class="keyword">left</b> variable to 
True. This variable is used in the <b class="keyword">Move</b>
method to change coordinates of the worm object. Notice also, that
when the worm is heading to the right, we cannot turn immediately 
to the left. 
</p>


<div class="codehead">nibbles.vb</div>
<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' In this program, we create
' a Nibbles game clone
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System
Imports System.Drawing
Imports System.Windows.Forms

Public Class WinVBApp 
    Inherits Form

    Public Sub New
    
        Me.Text = "Nibbles"       

        Me.FormBorderStyle = FormBorderStyle.FixedSingle
        
        Dim borderWidth As Integer = (Me.Width - Me.ClientSize.Width) / 2
        Dim titleBarHeight As Integer = Me.Height - Me.ClientSize.Height - borderWidth
        
        Dim board As New BoardSpace.Board
        board.BORDER_WIDTH = borderWidth
        board.TITLEBAR_HEIGHT = titleBarHeight

        Me.Controls.Add(board)
        Me.CenterToScreen
        
    End Sub
    
    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub

End Class
</pre>

<p>
This is the main class. 
</p>


<br>
<img src="/img/gui/vbwinf/nibbles.png" alt="Nibbles">
<div class="figure">Figure: Nibbles</div>


<hr class="btm">

<p>
This was the Nibbles game programmed using the Mono Winforms library and the Visual Basic language.
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 3, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

